<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地址管理-{$tpshop_config['shop_info_store_title']}</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/tpshop.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/myaccount.css"/>
    <script src="__STATIC__/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/layer/layer.js"></script>
</head>
<body class="bg-f5">
<include file="user/header"/>
<div class="home-index-middle">
    <div class="w1224">
        <div class="g-crumbs">
            <a href="{:U('Home/User/index')}">我的商城</a>
            <i class="litt-xyb"></i>
            <span>地址管理</span>
        </div>
        <div class="home-main">
            <include file="user/menu"/>
            <div class="ri-menu fr">
                <div class="menumain p">
                    <div class="goodpiece">
                        <h1>地址管理</h1>
                        <a class="address" href="javascript:;"><span class="co_blue">增加新地址</span></a>
                    </div>
                    <div class="grou_num_list address_list_jl ma-to-20">
                        <ul class="grou_tite">
                            <li class="sx2"><span>收货人</span></li>
                            <li class="sx1"><span>收货地址</span></li>
                            <li class="sx3"><span>联系电话</span></li>
                            <li class="sx5"><span>操作</span></li>
                        </ul>
                        <volist name="lists" id="list">
                            <ul class="add_conta">
                                <li class="sx2">
                                    <span>{$list.consignee}</span>
                                </li>
                                <li class="sx1"><span>{$region_list[$list['province']]}</span><span>{$region_list[$list['city']]}</span><span>{$region_list[$list['district']]}</span><span>{$region_list[$list['twon']]}{$list.address}</span>
                                </li>
                                <li class="sx3"><span>{$list.mobile}</span></li>
                                <li class="sx5">
                                    <if condition="$list['is_default'] neq 1">
                                        <span><a class="address_set_default" data-address-id="{$list['address_id']}">设为默认</a></span>
                                        <else/>
                                        <span style="font-size:14px;background:#ffaa45;padding:2px;font-weight:400;"><a>默认地址</a></span>
                                    </if>
                                    <a class="address co_blue" data-address-id="{$list['address_id']}">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a class="address_delete co_blue" data-address-id="{$list['address_id']}">删除</a></li>
                            </ul>
                        </volist>
                    </div>
                    <p class="gp_num2">已保存<em class="red">{$lists|count}</em>条地址，还可以保存<em class="red">
                        <php>echo 20-count($lists);</php>
                    </em>条地址
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--编辑地址弹窗-s--->
<div class="ui-dialog infom-dia" style="width: 700px">
    <form id="address_form">
        <input name="address_id" type="hidden" value="0">

        <div class="ui-dialog-title">
            <span>新增收货地址</span>
            <a class="ui-dialog-close" title="关闭">
                <span class="ui-icon ui-icon-delete"></span>
            </a>
        </div>
        <div class="ui-dialog-content" style="height: 600px;width: 700px">
            <div class="invoice-dialog">
                <div class="zinvoice-tips">
                    <!--<span class="tip-cont">错误信息</span>-->
                </div>
                <div class="ui-switchable-panel">
                    <div class="invoice_title p">
                        <span class="label"><span class="red">*</span>收货人：</span>

                        <div class="fl">
                            <input class="invoice_tt" name="consignee" type="text" value="" maxlength="12"/>
                            <span class="err" id="err_consignee"></span>
                        </div>
                    </div>
                    <div class="invoice_title p">
                        <span class="label"><span class="red">*</span>手机或固定电话：</span>

                        <div class="fl">
                            <input class="invoice_tt" name="mobile" type="text" value=""
                                   placeholder="固话号码格式:xx-xx(例如: 0755-86140485)" maxlength="15"/>
                            <span class="err" id="err_mobile"></span>
                        </div>
                    </div>
                    <div class="invoice_title p">
                        <span class="label"><span class="red">*</span>收货地址：</span>
                        <span class="err" id="err_province"></span>
                        <span class="err" id="err_city"></span>
                        <span class="err" id="err_district"></span>
                        <select class="di-bl fl seauii" name="province" id="province" onChange="get_city(this,0)">
                            <option value="0">请选择</option>
                        </select>

                        <select class="di-bl fl seauii" name="city" id="city" onChange="get_area(this)">
                            <option value="0">请选择</option>
                        </select>

                        <select class="di-bl fl seauii" name="district" id="district" onChange="get_twon(this)">
                            <option value="0">请选择</option>
                        </select>

                        <select class="di-bl fl seauii" name="twon" id="twon" style="display:none;">
                        </select>
                    </div>
                    <div class="invoice_title p">
                        <span class="label"><span class="red">*</span>详细地址：</span>
                        <span class="err" id="err_address"></span>

                        <div class="fl">
                            <input class="invoice_tt" name="address" type="text" placeholder="详细地址" maxlength="100"/>
                        </div>
                    </div>
                    <div class="invoice_title p">
                        <span class="label">邮编：</span>

                        <div class="fl">
                            <input class="invoice_tt" name="zipcode" type="text" value=""
                                   onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" maxlength="10"/>
                        </div>
                    </div>
                    <div class="invoice_title p">
                        <span class="label">&nbsp;</span>

                        <div class="fl">
                            <div class="op-btns  invoice_sendwithgift">
                                <a id="address_submit" class="btn-1">保存</a>
                                <a onclick="$('.ui-dialog-close').trigger('click');" class="btn-9">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--编辑地址弹窗-e--->
<div class="ui-mask"></div>
<!--footer-s-->
<div class="footer p">
    <include file="public/footer"/>
</div>
<!--footer-e-->
<script type="text/javascript">
    $(document).ready(function () {
        get_province();
    });
    //新增编辑地址
    $(function () {
        //新增编辑弹窗事件
        $(document).on("click", '.address', function (e) {
            var dh = $(document).height();
            var dw = $(document).width();
            $('.ui-mask').height(dh).width(dw).show();
            $('.ui-dialog').show();
            var address_id = $(this).data('address-id');
            if (address_id > 0) {
                $("input[name='address_id']").val(address_id);
                $.ajax({
                    type: "POST",
                    url: "{:U('Home/User/address')}",
                    data: {address_id: address_id},
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 1) {
                            $("input[name='consignee']").val(data.result.user_address.consignee);
                            $("input[name='address']").val(data.result.user_address.address);
                            $("input[name='mobile']").val(data.result.user_address.mobile);
                            $("input[name='zipcode']").val(data.result.user_address.zipcode);
                            var city_list_option_html = '<option value="0">请选择</option>';
                            var district_list_option_html = '<option value="0">请选择</option>';
                            var twon_list_option_html = '<option value="0">请选择</option>';
                            $.each(data.result.city_list, function (n, value) {
                                city_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
                            });
                            $('#city').html(city_list_option_html).val(data.result.user_address.city);
                            $.each(data.result.district_list, function (n, value) {
                                district_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
                            });
                            $('#district').html(district_list_option_html).val(data.result.user_address.district);
                            $.each(data.result.twon_list, function (n, value) {
                                twon_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
                            });
                            if (data.result.twon_list.length > 0) {
                                $('#twon').html(twon_list_option_html).val(data.result.user_address.twon).show();
                            }
                            $("#province").val(data.result.user_address.province);
                        } else {
                            layer.open({icon: 2, content: data.msg, time: 1000});
                        }
                    }
                });
            } else {
                $("input[name='address_id']").val(0);
                $("input[name='consignee']").val('');
                $("input[name='address']").val('');
                $("input[name='mobile']").val('');
                $("input[name='zipcode']").val('');
                $("#province").val(0);
                $("#city").empty().html('<option value="0">请选择</option>');
                $("#district").empty().html('<option value="0">请选择</option>');
                $("#twon").empty().html('<option value="0">请选择</option>').hide();
            }
        })
        //关闭弹窗事件
        $(document).on("click", '.ui-dialog-close', function (e) {
            $('.ui-mask').hide();
            $('.ui-dialog').hide();
            $('.err').hide();
        })
        //地址提交
        $(document).on("click", '#address_submit', function (e) {
            $.ajax({
                type: "POST",
                url: "{:U('Home/User/addressSave')}",
                data: $('#address_form').serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        location.reload();
                    } else {
                        layer.open({
                            icon: 2, content: data.msg, time: 1000, end: function () {
                                $.each(data.result, function (index, item) {
                                    $('#err_' + index).text(item).show();
                                });
                            }
                        });
                    }
                }
            });
        })

    })
    //设置默认地址
    $(function () {
        $(document).on("click", '.address_set_default', function (e) {
            var address_id = $(this).data('address-id');
            $.ajax({
                type: "POST",
                url: "{:U('Home/User/addressSetDefault')}",
                data: {address_id: address_id},
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        location.reload();
                    } else {
                        layer.open({icon: 2, content: data.msg, time: 1000});
                    }
                }
            });
        })
    })
    //删除地址
    $(function () {
        $(document).on("click", '.address_delete', function (e) {
            var address_id = $(this).data('address-id');
            $.ajax({
                type: "POST",
                url: "{:U('Home/User/addressDelete')}",
                data: {address_id: address_id},
                dataType: 'json',
                success: function (data) {
                    if (data.status == 1) {
                        location.reload();
                    } else {
                        layer.open({icon: 2, content: data.msg, time: 1000});
                    }
                }
            });
        })
    })

    //获取省列表
    function get_province() {
        $.ajax({
            type: "GET",
            url: "{:U('Home/Api/getProvince')}",
            dataType: 'json',
            success: function (data) {
                if (data.status == 1) {
                    var option_html = '<option value="0">请选择</option>';
                    $.each(data.result, function (n, value) {
                        option_html += '<option value="' + value.id + '">' + value.name + '</option>';
                    });
                    $('#province').html(option_html);
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            }
        });
    }

</script>
</body>
</html>